{include file="public/header"}
</head>
<body>
	<header>
		<div>
			<a href="javascript:history.back();"><i class="icon-fanhui icon iconfont"></i></a>
		</div>
		<div>
			添加地址
		</div>
		<div></div>
	</header>
	<div class="main vip">
		
		<div class="tabs">
			<a href="../user/user.html">我的订单</a>
			<a href="address.html" class="active">收货地址</a>
		</div>
		
		<div class="tabContent">
			<div class="addNewAddr">
				<form action="{:url('Address/addressAdd')}" method="post">
					<div class="adr">
						<span class="takeP">
							<label for="">收货人：</label>
							<span>
								<input type="text" name="name">
							</span>
						</span>
						<span class="tel">
							<label for="">电话：</label>
							<span>
								<input type="number" name="tel">
							</span>
						</span>
						<span class="provi">
							<label for="">省份：</label>
							<span>
								<select name="sheng" id="sheng">
									<option value="">请选择省份</option>
									{foreach $sheng as $v}
									<option value="{$v['id']}">{$v['name']}</option>
									{/foreach}
								</select>
							</span>
						</span>
						<span class="city">
							<label for="">地市：</label>
							<span>
								<select name="city" id="city">
									<option value="">请选择地市</option>
								</select>
							</span>
						</span>
						<span class="county">
							<label for="">区县：</label>
							<span>
								<select name="quyu" id="quyu">
									<option value="">请选择区县</option>
								</select>
							</span>
							
						</span>
						<span class="otherAddInfo">
							<label for="">详细地址：</label>
							<span>
								<input type="text" name="address">
							</span>
						</span>
					</div>
					<button class="addAddr">保存</button>
				</form>
				<!--<a href="#" class="addAddr"></a>-->
			</div>
		
		</div>
		
	</div>
	{include file="public/footer"}
	<script>
        $(function () {
            $('#sheng').change(function () {
                var sheng = $('#sheng').val();
                $.ajax({
                    type: 'post',
                    url: '{:url("Address/addressSheng")}',
                    data: {sheng:sheng},
                    dataType:'json',
                    success: function (data) {
                        // console.log(data);
                        $('#city').empty();
                        $.each(data,function(i,o){
                            var name = o.name;
                            var html = '<option value="'+o.id+'">'+name+'</option>';
                            $('#city').append(html);
                        });
                        $("#city").trigger("change");
                    }
                });
            });
        })

        $('#city').change(function () {
            var city = $('#city').val();
            $.ajax({
                type: 'post',
                url: '{:url("Address/addressCity")}',
                data: {city:city},
                dataType:'json',
                success: function (data) {
                    $('#quyu').empty();
                    $.each(data,function(i,o){
                        var name = o.name;
                        var html = '<option value="'+o.id+'">'+name+'</option>';
                        $('#quyu').append(html);
                    });

                }
            });
        });
	</script>
</body>
</html>